// Typography definitions
//  Numeric values represent the strength/opacity of the font color

@mixin generate-text-colors($txts) {
  @each $txt in $txts {
    $txt-name: $txt;
    @if $txt-name == 050 {
      $txt-name: '050';
    }

    .txt-#{$txt-name} {
      color: var(--clr-txt-#{$txt-name});

      @if $txt != '200' {
        b,
        strong {
          color: var(--clr-txt-#{$txt + 50});
        }
      }
    }
  }
}

// Colors
:root {
  --clr-txt-200: hsla(0, 0%, 100%, 0.98);
  --clr-txt-150: hsla(0, 0%, 100%, 0.89);
  --clr-txt-100: hsla(0, 0%, 100%, 0.78);
  --clr-txt-050: hsla(0, 0%, 100%, 0.61);
}

@include generate-text-colors((200, 150, 100, 050));
